<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" >
	<head th:replace="common :: head(~{::title})">
		<title>关于我</title>
	</head>
	<body>
		<!-- 导航 -->
		<nav th:replace="common :: menu(5)"></nav>

		<!-- 中间内容 -->
		<div class="m-container m-padded-tb-big">
			<div class="ui container">
				<div class="ui stackable grid">
					<div class="eleven wide column">
						<div class="ui segment">
							<img src="https://picsum.photos/seed/picsum/800/600" alt="" class="ui rounded image" />
						</div>
					</div>
					<div class="five wide column">
						<div class="ui top attached segment">
							<div class="ui header">关于我</div>
						</div>
						<div class="ui attached segment">
							<p class="m-text">小王，一个独立开发者，折腾在0 和1 世界的大叔;一个终身学习者，誓将学习无限循环。希望结识可以共同成长的小伙伴.</p>
							<p class="m-text">热爱编程，喜欢折腾，正在探索高效学习编程技术的方法。..</p>
						</div>
						<div class="ui attached segment">
							<div class="ui orange basic left pointing label">编程</div>
							<div class="ui orange basic left pointing label">写作</div>
							<div class="ui orange basic left pointing label">思考</div>
							<div class="ui orange basic left pointing label">运动</div>
						</div>
						<div class="ui attached segment">
							<div class="ui teal basic left pointing label m-margin-tb-tiny">Java</div>
							<div class="ui teal basic left pointing label m-margin-tb-tiny">Linux</div>
							<div class="ui teal basic left pointing label m-margin-tb-tiny">Shell</div>
							<div class="ui teal basic left pointing label m-margin-tb-tiny">Node</div>
							<div class="ui teal basic left pointing label m-margin-tb-tiny">Mysql</div>
							<div class="ui teal basic left pointing label m-margin-tb-tiny">Redis</div>
						</div>
						<div class="ui bottom attached segment">
							<a href="#" class="ui circular icon button"><i class="github icon"></i></a>
							<a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
							<a href="#" class="ui qq circular icon button" data-content="18310659xx" data-position="bottom center"><i class="qq icon"></i></a>
						</div>
						
						<div class="ui wechat-qr flowing popup transition hidden">
							<img th:src="@{/images/wechat.png}" alt="" class="ui rounded image" style="width: 100px;"/>
						</div>
						
					</div>
				</div>
			</div>	
		</div>

		<!-- 底部footer -->
		<footer th:replace="common :: footer"></footer>

		<th:block th:replace="common :: script"></th:block>
	
	<script>
		// 显示QQ
		$('.qq').popup();
		
		// 显示微信二维码
		$('.wechat').popup({
			popup : $('.wechat-qr.popup'),
			on : 'hover',
			position: 'bottom center'
		});
	</script>
	</body>
</html>